<script lang="ts" setup>
import { ref } from "vue"
const speechModelTxtValue = ref("")
interface Props {
  disabled: boolean
  loading: boolean
}

const props = defineProps<Props>()
const emits = defineEmits(["onSubmitSave"])

const onSubmit = () => {
  emits("onSubmitSave", speechModelTxtValue.value)
}
</script>

<template>
  <div class="app-container">
    <div>内容</div>
    <el-input
      class="speechModelTxt"
      v-model="speechModelTxtValue"
      :autosize="{ minRows: 8, maxRows: 8 }"
      type="textarea"
      placeholder="请输入"
    />
  </div>
  <el-button
    :disabled="props.disabled || !speechModelTxtValue"
    class="w-100"
    type="danger"
    :loading="loading"
    @click="onSubmit()"
  >
    声音生成
  </el-button>
</template>

<style lang="scss" scoped>
.speechModelTxt {
  padding: 20px 0;
}

.w-100 {
  width: calc(100% - 40px) !important;
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
}
</style>
